<template>
    <div class="person">
        <h2>sum: {{ sum }}</h2>
        <button @click="add">sum+1</button>
    </div>
</template>

<!-- vue2 的写法 -->
<script lang="ts">
export default {
    name: 'Person',
    data() {
        return {
            sum: 0
        }
    },
    methods: {
        add() {
            this.sum++
        }
    },
    beforeCreate() {
        console.log('beforeCreate')
    },
    created() {
        console.log('created')
    },
    beforeMount() {
        console.log('beforeMount')
    },
    mounted() {
        console.log('mounted')
    },
    beforeUpdate() {
        console.log('beforeUpdate')
    },
    updated() {
        console.log('updated')
    },
    beforeUnmount() {
        console.log('beforeUnmunt')
    },
    unmounted() {
        console.log('unmounted')
    },
}
</script>

<script setup lang="ts">
</script>

<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 2px;
}

li {
    font-size: 15px;
}
</style>